4-8 资源推荐Vite及React模板项目
为什么推荐 Vite
在 CRA（create-react-app）已被官方弃用的背景下，Vite + React 成为新建项目的首选方案。Vite 的核心优势在于极速的开发体验：
| 维度 | CRA (Webpack) | Vite |
|---|---|---|
| 冷启动 | 30-60 秒 | 1-3 秒 |
| HMR 热更新 | 1-5 秒 | < 100ms |
| 构建时间 | 较慢 | 较快（Rollup） |
| 配置复杂度 | 需要 eject 或 craco | 简洁的 vite.config.ts |
使用 Vite 创建 React 项目
基础模板
# React + TypeScript
npm create vite@latest my-app -- --template react-ts
# React + JavaScript
npm create vite@latest my-app -- --template react
# React + SWC（更快的编译器）
npm create vite@latest my-app -- --template react-swc-ts
bash
项目结构
my-app/
├── src/
│ ├── App.tsx
│ ├── App.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
text
常用配置
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
});
typescript
推荐的模板项目
Awesome React 模板
Awesome React 是 GitHub 上最全面的 React 资源合集，其中包含大量模板项目。推荐关注以下分类：
企业级模板
| 模板 | 特点 | 地址 |
|---|---|---|
| Ant Design Pro | 阿里出品，功能完备的后台管理模板 | github.com/ant-design/ant-design-pro |
| React Admin | 基于 Material UI 的管理后台 | github.com/marmelab/react-admin |
| Soybean Admin | 基于 Vue/React 的清新后台 | github.com/soybeanjs/soybean-admin |
轻量级模板
| 模板 | 特点 |
|---|---|
| Vite React TS Starter | 最小化的 Vite + React + TypeScript 脚手架 |
| React Starter Kit | 全栈模板（React + Node.js + GraphQL） |
| T3 Stack | Next.js + TypeScript + tRPC + Prisma + Tailwind |
源码调试专用模板
| 模板 | 特点 |
|---|---|
| debug-react | 预配置好的 React 源码调试项目 |
| cra-template-rne | CRA 的 React 源码调试模板 |
学习路径建议
- 入门阶段：使用 Vite + React 快速跑通一个 CRUD 项目
- 进阶阶段：使用 Ant Design Pro 搭建完整的后台管理系统
- 源码阶段：使用调试模板深入 React 内部机制
- 实战阶段：参考 Awesome React 中的开源项目，学习最佳实践
不论使用哪种模板，核心目标都是跑通一个"增删改查"的小闭环，然后在闭环基础上逐步扩展。
↑